<template>
	<view class="filter_box flex align-center justify-between pad0-40 box-sizing">
		<view class="fileter_item flex align-center font26 color66" v-for="(item,index) in list" :key="index"
			@click="changFilter(index)">
			<span :class="filterIndex==index?'colorf1':''">{{item.name}}</span>
			<image v-show="filterIndex!=index" src="@/static/images/filter_tri.png" mode=""></image>
			<image v-show="filterIndex==index" :class="filterIndex==index&&item.isAsc?'rotateImg':''"
				src="@/static/images/filter_tri_act.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "jc-orderby",
		props: {
			optionlist: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				list: [],
				filterIndex: 0
			};
		},
		created() {
			console.log("我是排序组件")
			this.list = this.optionlist
			console.log("xx：",this.optionlist)
		},
		methods: {
			changFilter(index) {
				if (this.filterIndex == index) {
					this.list[index].isAsc = !this.list[index].isAsc
				} else {
					this.filterIndex = index
				}
				this.$forceUpdate()
				this.$emit('change', this.list[this.filterIndex])
				// console.log(this.list);
			},
		}
	}
</script>

<style lang="scss">
	.filter_box {
		margin-top: 5rpx;

		.fileter_item {
			padding: 25rpx 0;

			image {
				width: 15rpx;
				height: 8rpx;
				margin-left: 10rpx;
				transition: all 0.2s ease-in-out;
			}

			.rotateImg {
				transform: rotate(180deg) !important;
			}
		}
	}

	.flex {
		display: flex;
	}

	.align-center {
		align-items: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.pad0-40 {
		padding: 0 40rpx;
	}

	.box-sizing {
		box-sizing: border-box;
	}


	.font26 {
		font-size: 26rpx;
	}

	.color66 {
		color: #666666;
	}

	.colorf1 {
		color: #1E8EF1;
	}
</style>
